import { StyleSheet, Text, View, ImageBackground, Pressable } from 'react-native';
import React from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/Ionicons';
import { observer, deviceStore } from '~/store';
import { FocusAwareStatusBar } from '~/components';
import { getBleShock, setBleShock, setHeartLaserStatus } from '~/utils/ble/application';
import { px2dp, scale, width } from '~/utils/px2dp';
import { delay } from '~/utils/utils';

export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const router: any = useRoute();
    const { shockStatus } = deviceStore;
    const setSleep = () => {
        setBleShock(router.params, shockStatus ? 1 : 0);
        delay(200);
        getBleShock(router.params);
        delay(200);
        setHeartLaserStatus(router.params, 1);
    };
    return (
        <View style={styles.container}>
            <FocusAwareStatusBar translucent />
            <ImageBackground
                style={styles.bg}
                source={{
                    uri: !shockStatus
                        ? 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/shuimianmoshiweikaiqi.png'
                        : 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/shuimianmoshikaiqi.png',
                }}>
                <Pressable style={styles.nav} onPress={() => navigation.goBack()}>
                    <Icon name="chevron-back" size={26} color={'#000'}></Icon>
                </Pressable>
                <View style={styles.bottom}>
                    <Pressable style={[styles.border]} onPress={setSleep}>
                        <Text numberOfLines={2} style={styles.border_text}>
                            {shockStatus ? t('BleSleep.t1') : t('BleSleep.t2')}
                        </Text>
                    </Pressable>
                    <Text style={styles.tips}>{t('BleSleep.t3')}</Text>
                </View>
            </ImageBackground>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    bg: {
        width: width,
        height: '100%',
    },
    nav: {
        position: 'absolute',
        top: '8%',
        left: '4%',
    },
    bottom: {
        position: 'absolute',
        bottom: '10%',
        width: width,
    },
    border: {
        backgroundColor: '#91A7E2',
        width: px2dp(240),
        height: px2dp(240),
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: px2dp(200),
        alignSelf: 'center',
    },
    border_text: {
        color: '#fff',
        fontSize: scale(30),
        fontWeight: 'bold',
    },
    tips: {
        marginTop: px2dp(32),
        color: '#a4a4a4',
        fontSize: scale(28),
        textAlign: 'center',
        lineHeight: px2dp(38),
    },
});
